<template>
  <el-main>
    <el-table
      v-show="flag"
      v-loading="loading"
      :data="tableData1_2"
      ref="tableData1_2"
      style="width: 100%"
      border
    >
      <el-table-column
        prop="typeAppUnit"
        label="典型应用单位"
        width="350"
        header-align="center"
        align="center"
      >
      </el-table-column>
      <el-table-column
        prop="receiveTimes"
        label="领取次数"
        width="150"
        header-align="center"
        align="center"
      >
      </el-table-column>
      <el-table-column
        width="150"
        label="领取数量"
        header-align="center"
        prop="receiveNum"
        align="center"
      >
      </el-table-column>
      <el-table-column
        width="300"
        label="应用项目"
        header-align="center"
        align="center"
        prop="projectName"
      >
      </el-table-column>
      <el-table-column
        label="备注"
        header-align="center"
        align="center"
        prop="memo"
      >
      </el-table-column>
    </el-table>
    <div v-show="!flag" id="main" style="width: 100%; height: 400px"></div>
  </el-main>
</template>

<script>
import { typeAppReport } from "@/api/report/basic";
var myChart;

export default {
  name: "table1_2",
  data() {
    return {
      loading: false,
      flag: true,
      spanArr: [],
      spanArr1: [],
      tableData1_2: [],
      tableChart: [],
      queryParams: {},
      option: {
        title: {
          text: "应用项目",
        },
        tooltip: {},
        legend: {
          data: ["领图次数"],
        },
        xAxis: {
          data: [],
          axisLabel: {
            interval: 0,
          },
        },
        yAxis: {},
        series: [
          {
            name: "领图次数",
            type: "bar",
            data: [],
            animationDelay: function (idx) {
              return idx * 10 + 1000;
            },
            barWidth: 60,
            itemStyle: {
              normal: {
                // 随机显示
                //color:function(d){return "#"+Math.floor(Math.random()*(256*256*256-1)).toString(16);}

                // 定制显示（按顺序）
                color: function (params) {
                  var colorList = [
                    "#C1232B",
                    "#B5C334",
                    "#FCCE10",
                    "#E87C25",
                    "#27727B",

                    "#FE8463",
                    "#9BCA63",
                    "#FAD860",
                    "#F3A43B",
                    "#60C0DD",

                    "#D7504B",
                    "#C6E579",
                    "#F4E001",
                    "#F0805A",
                    "#26C0C0",
                  ];
                  return colorList[params.dataIndex];
                },
                label: {
									show: true, //开启显示
									position: 'top', //在上方显示
									textStyle: { //数值样式
										color: 'black',
										fontSize: 16
									}
								},
              },
            },
          },
        ],
        grid: {
          left: "8%",
          right: "0",
          bottom: "10%",
          containLabel: true,
        },
      },
    };
  },
  mounted() {
    this.$emit("reportSearch", "");
  },
  methods: {
    export2Excel(name) {
      const tHeader = [
        "典型应用单位",
        "领取次数",
        "领取数量",
        "应用项目",
        "备注",
      ];
      var filterVal = [];
      for (var i in this.tableData1_2[0]) {
        if (i != "type" && i != "statistics") {
          filterVal.push(i);
        }
      }
      console.log(filterVal);
      // common.export2Excel(name,tHeader,filterVal,this.tableData0_0)
      require.ensure([], () => {
        const {
          export_json_to_excel,
        } = require("@/views/basic-report/common/Export1_5");
        const list = this.tableData1_2;
        const data = this.formatJson(filterVal, list);

        export_json_to_excel(tHeader, data, name);
      });
    },
    formatJson(filterVal, jsonData) {
      return jsonData.map((v) => filterVal.map((j) => v[j]));
    },
    myEcharts() {
      this.refreshchart();
    },
    showchart(selectValue, queryParams) {
      this.flag = !this.flag;
      if (!this.flag) {
        this.refreshchart(queryParams);
      }
    },
    refreshchart(queryParams) {
      // 基于准备好的dom，初始化echarts实例
      myChart = this.$echarts.init(document.getElementById("main"));
      if (queryParams) {
        this.queryParams = queryParams;
      }
      var valueType = this.queryParams.chartValueType;
      var valueTypeName = this.queryParams.chartValueTypeName;
      if (valueType) {
        console.log(valueType);
        var condition = {};
        condition.beginTime = this.queryParams.beginTime;
        condition.endTime = this.queryParams.endTime;
        condition.order = valueType + " desc";
        condition.topNum = this.queryParams.topNum;
        typeAppReport(condition).then((response) => {
          this.tableChart = response.rows;

          this.option.xAxis.data = [];
          this.option.series[0].data = [];
          this.option.legend.data[0] = valueTypeName;
          this.option.series[0].name = valueTypeName;
          for (
            var i = 0;
            i < this.tableChart.length &&
            this.option.series[0].data.length <= 20;
            i++
          ) {
            this.option.xAxis.data.push(this.tableChart[i].projectName);
            this.option.series[0].data.push(this.tableChart[i][valueType]);
          }
          myChart.setOption(this.option);
          setTimeout(function () {
            myChart.resize();
          }, 100);
        });
        // 使用刚指定的配置项和数据显示图表。
      }
    },
    getReportData(queryParam) {
      this.loading = true;
      var condition = {};
      if (queryParam) {
        condition.beginTime = queryParam.beginTime;
        condition.endTime = queryParam.endTime;
        condition.order = "A.receiveNum desc";
        typeAppReport(condition).then((response) => {
          this.tableData1_2 = response.rows;
          this.total = response.total;
          this.myEcharts();
          this.loading = false;
        });
      } else {
        this.tableData1_2 = [];
        this.loading = false;
      }
    },
  },
};
</script>
